<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>打卡记录界面</title>
    <!--<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">-->
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>

<!--设置layer时间选择器不显示秒-->
<style type="text/css">
    .layui-laydate-content > .layui-laydate-list {
        padding-bottom: 0px;
        overflow: hidden;
    }

    .layui-laydate-content > .layui-laydate-list > li {
        width: 50%
    }

    .merge-box .scrollbox .merge-list {
        padding-bottom: 5px;
    }
</style>
<body>

<div class="layui-layout layui-layout-admin">
    <!--头部导航栏-->
    <div class="layui-header">
        <a href="" th:href="@{/index}">
            <div class="layui-logo layui-hide-xs layui-bg-black">
                <i class="layui-icon layui-icon-home" style="font-size: 35px"></i> 主页
            </div>
        </a>

        <!-- 头部区域（可配合layui 已有的水平导航） 导航栏 -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="" th:href="@{/punch}">打卡记录处理</a>
            </li>

        </ul>
        <!--导航栏右边个人信息-->
        <ul class="layui-nav layui-layout-right ">
            <span style="color: white;border: solid 0px;"
                  class="layui-btn  layui-btn-lg layui-btn-primary layui-border-danger">
                <i class="layui-icon layui-icon-console" style="font-size: 25px"></i>
                <strong th:include="time"></strong>
            </span>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-notice" style="font-size: 18px"></i>请假消息
                    <span class="layui-badge" id="leaveRequestSum"></span>
                </a>
            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block" style="margin-right: 20px">
                <a href="javascript:;">
                    <span id="userName" th:text="${session.admin.getAdminNumber()}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a>详细信息</a></dd>
                    <dd><a>设置</a></dd>
                    <dd><a href="" th:href="@{/logout}">退出</a></dd>
                </dl>
            </li>
            <button class="layui-btn layui-btn-radius layui-btn-primary layui-border-green">
                <i class="layui-icon layui-icon-group" style="font-size: 18px"></i>在线人数:
                <span th:text="${application.loginCount}"></span></button>
        </ul>
    </div>

    <!--左侧导航栏-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item ">
                    <a a href="" th:href="@{/index}">员工信息管理</a>
                </li>
                <li class="layui-nav-item">
                    <a a href="" th:href="@{/punch}">打卡记录处理</a>
                </li>
                <li class="layui-nav-item"><a href="" th:href="@{/news}">通知新闻界面</a></li>
                <li class="layui-nav-item"><a href="" th:href="@{/logout}">退出</a></li>
            </ul>
        </div>
    </div>
    <strong th:text="${mess}" id="messInfo" style="display: none"></strong>
    <div class="layui-body"><br>

        <div class="layui-card" style="margin-top: 45px;margin-top: -10px" id="all-news">
            <div class="layui-card-body">
                <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                    <ul class="layui-tab-title" style="z-index: 999;background-color: #9F9F9F">
                        <li class="layui-this" style="width: 20%;color: black;font-size: 25px">
                            <i class="layui-icon layui-icon-read" style="font-size: 25px"></i> 所有新闻
                        </li>

                    </ul>
                    <div class="test-table-reload-btn" style="margin-top: 10px;z-index: 9999;position: absolute">
                        <!--查询盒子-->
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="query-title"
                                       placeholder="输入标题查询" style="border: #009f95 solid 1px">
                            </div>
                        </div>
                        <a class="layui-btn layui-btn-primary layui-border-green" id="query-title-btn">查询</a>
                        <a class="layui-btn layui-btn-primary layui-border-green" id="add-news-btn">发布</a>
                    </div>
                    <div class="layui-tab-content" style="margin-top: -20px;z-index: 5">
                        <!--上午考勤记录表-->
                        <div class="layui-tab-item layui-show">
                            <table class="layui-hide" id="all-news-table" lay-filter="all-news-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- <table class="layui-hide" id="allEmp" lay-filter="allEmp" style="margin-top: -50px"></table>-->
    </div>


    <!--员工请假消息盒子-->
    <div id="leave-mes-box" style="margin-left:30px;display :none;width: 300px;">
    </div>

    <!--发布一条新闻-->
    <div id="add-news-box" style="display: none">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" >
                    <div class="layui-form-item">
                        <label class="layui-form-label">文章标题</label>
                        <div class="layui-input-block" style="border: #009f95 solid 1px">
                            <input type="text" id="title" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">发布人</label>
                        <div class="layui-input-block" style="border: #009f95 solid 1px">
                            <input type="text" id="author" lay-verify="required" placeholder="请输入"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">文章内容</label>
                        <div class="layui-input-block" style="border: #009f95 solid 1px;">
                            <textarea style="height: 200px" id="text" placeholder="请输入内容" lay-verify="required"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <br>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" id="add-news" >发布</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--<div class="layui-footer">
      &lt;!&ndash; 底部固定区域 &ndash;&gt;
      底部固定区域
    </div>-->
</div>
</body>
<!--<script src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/layui.js"></script>-->
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-3.1.0.js"></script>


<!--表格操作栏-->
<script type="text/html" id="allEmp-table-toolbar">
    <a class="layui-btn layui-btn-xs layui-border-green layui-btn-radius layui-btn-primary" lay-event="edit"
       title="编辑员工信息">
        <div class="layui-icon layui-icon-edit">更换图片</div>
    </a>
</script>


<!--更换头像-->
<div class="layui-col-md12" id="update-emp-img-box" style="display: none">
    <div class="layui-card">
        <div class="layui-card-header">
            <i class="layui-icon layui-icon-next" style="color: red"></i>
            上传成功，自动刷新页面刷新,上传失败，请点击重试按钮,提示上传接口出现问题请刷新页面重试，图片上传需要时间，页面头像更新存在延迟，可在稍后刷新
        </div>
        <div class="layui-card-body" style="margin-top: 75px">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test-upload-normal">选择图片</button>
                <button type="button" class="layui-btn" id="btn">上传图片</button>
                <p style="float: right" id="test-upload-demoText"></p>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="test-upload-normal-img" width="150px" height="150px">
                </div>
            </div>
        </div>
    </div>
</div>
<!--表格头部工具栏-->


<script type="text/javascript">
    //JS
    layui.use(['element', 'layer', 'util', 'jquery', 'table', 'laydate', 'form','upload'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , table = layui.table
            , admin = layui.admin
            , laydate = layui.laydate
            , form = layui.form
            , upload = layui.upload
            , $ = layui.jquery;


        /*检测出request域中的信息*/
        let mess = $("#messInfo").text();
        if (mess == null || mess === "") {
        } else {
            layer.msg(mess, {offset: '250px', time: 1500, anim: 6});
            $("#messInfo").text("");
        }
        /*获取请假消息*/
        getLeaveRequestSum();

        function getLeaveRequestSum() {
            let url = "getLeaveRequestSum";
            let param = {};
            $.get(url, param, function (res) {
                $("#leaveRequestSum").html(res);
            });
        }

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                let ii = layer.load(0, {shade: false});
                setTimeout(function () {
                    let url = "/getEmpLeaveRequest";
                    let param = {};
                    $.get(url, param, function (res) {
                        layer.close(ii);
                        $("#leave-mes-box").html("");
                        if (res.count == 0 || res.count === "0") {
                            let leaveRows = '<h3>暂时没有未处理的请假请求</h3>';
                            $("#leave-mes-box").append(leaveRows);
                        } else {
                            for (let i = 0; i < res.data.length; i++) {
                                let leaveRows = '<div  style="background-color: #009f95;color: #303030;padding: 5px;border-top-left-radius: 9px;border-top-right-radius: 9px;margin-top: 20px;border: #303030 solid 1px;" >\n' +
                                    '        <h3 style="margin-left: 10px">工  &nbsp;&nbsp;&nbsp;号：' + res.data[i].empNumber + '</h3>\n' +
                                    '        <h3 style="margin-left: 10px">' + res.data[i].empName + ' &nbsp;&nbsp;&nbsp;' + res.data[i].department + '：' + res.data[i].empPosition + '</h3>\n' +
                                    '    </div>\n' +
                                    '    <div  style="padding: 15px;border-left: #303030 solid 1px;border-right: #303030 solid 1px;">\n' +
                                    '        <strong>请假时间：</strong>' + res.data[i].leaveDate + res.data[i].leaveTime + '<br><br>\n' +
                                    '        <strong>请假理由：</strong>' + res.data[i].reason +
                                    '    </div>\n' +
                                    '    <div  style="margin-bottom:  10px;border: #303030 solid 1px;border-top: none">\n' +
                                    '        <button id="agree" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius agree" style="margin-left: 160px" href="' + res.data[i].id + '" >批准</button>\n' +
                                    '        <button id="disagree" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius disagree" style="margin-left: 10px" href="' + res.data[i].id + '">不批准</button><br><br>\n' +
                                    '    </div>';
                                $("#leave-mes-box").append(leaveRows);
                            }
                        }
                    });
                });
                layer.open({
                    type: 1
                    , content: $("#leave-mes-box")
                    , area: ['360px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                    , end: function (res) {
                        $("#leave-mes-box").css("display", 'none');
                    }
                });
            }
        });


        //处理员工请假处理
        //批准请假
        $(document).delegate("#agree", "click", function () {
            let requestId = $(this).attr("href");//获得元素的属性值
            layer.confirm('确定批准该员工的请假请求吗？', function () {
                dealLeaveRequest(1, requestId)
            });
            return false;
        });
        //不批准
        $(document).delegate("#disagree", "click", function () {
            let requestId = $(this).attr("href");//获得元素的属性值
            layer.confirm('确定不批准该员工的请假请求吗？', function () {
                dealLeaveRequest(2, requestId)
            });
            return false;
        });

        function dealLeaveRequest(result, requestId) {
            var ii = layer.load(0, {shade: false});
            setTimeout(function () {
                let url = "dealLeaveRequest";
                let param = {result: result, requestId: requestId};
                $.get(url, param, function (res) {
                    layer.closeAll();
                    if (res === true || res === "true") {
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-admin',
                            closeBtn: false,
                            area: '350px',
                            anim: 5,
                            shadeClose: true,
                            icon: 1,
                            content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                                '        <h3>处理成功 !</h3>' +
                                '        <button class="layui-btn" style="float: right;margin-top: 20px" id="check-rquerst-ok">确定</button>' +
                                '    </div>',
                            title: '处理结果'
                        });
                        //执行删除操作前管理员要输入管理员操作密码
                        $("#check-rquerst-ok").click(function () {
                            window.location = '/punch';
                        });
                    } else {
                        layer.alert('处理失败', {skin: 'layui-layer-molv'});
                    }
                });
            });
        }



        /*获取所有新闻表*/
        table.render({
            elem: '#all-news-table'
            , toolbar: true
            , height: 500
            , url: '/emp/getAllNews'
            , skin: 'line'
            , title: '所有新闻'
            , cols: [
                [
                    {field: 'id', title: 'ID', align: 'center', width: 50}
                    , {field: 'title', title: '标题', align: 'center',}
                    , {field: 'author', title: '作者', align: 'center', width: 100}
                    , {field: 'releaseTime', title: '发布日期', align: 'center',}
                    , {field: 'content', title: '内容', align: 'center'}
                    , {
                    field: 'imgPath', title: '消息图片', align: 'center', width: 100, templet: function (res) {
                        return '<img src="../static/newsImages/' + res.imgPath + '" class="layui-nav-img">'
                    }

                }
                    , {fixed: 'right', title: '更换图片', align: 'center', toolbar: '#allEmp-table-toolbar', width: 200}

                ]
            ]
            , text: {
                none: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像没有还没找到数据呢<br>\n' +
                    '    </div>'
                ,
                error: '<br><br><br><i class="layui-icon" face style="color: #009f95;font-size: 150px;border-bottom: #009f95 solid 2px;padding:15px;margin-top: 30px" >&#xe664;</i><br>' +
                    '<br><div class="layui-text" style="font-size: 25px;margin-top: 15px;color: #009f95">\n' +
                    '      好像出错了呢\n' +
                    '    </div>'
            }
            , loading: true
        });

        table.on('tool(all-news-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                let newsId = data.id;
                layer.open({
                    type: 1
                    , skin: 'layui-layer-rim'
                    , area: ['500px', '500px']
                    , content: $("#update-emp-img-box")
                    , title: '更换上传--请根据提示操作'
                    , end: function (res) {
                        $("#update-emp-img-box").css("display", 'none');
                    }
                });

                //普通图片上传
                let uploadInst = upload.render({
                    elem: '#test-upload-normal'
                    , url: '/updateNewsImg?newsId='+ newsId
                    , acceptMime: 'image/*'
                    ,auto:false
                    ,bindAction:'#btn'
                    ,size:0
                    , before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#test-upload-normal-img').attr('src', result); //图片链接（base64）
                        });
                    }
                    , done: function (res) {
                        //如果上传失败
                        if (res.code > 0) {
                            let demoText = $('#test-upload-demoText');
                            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                            demoText.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                            return  layer.msg('上传失败');

                        } else {//上传成功
                            layer.closeAll();
                            table.reload('all-news-table', {
                                url: '/emp/getAllNews'
                            });
                            return layer.alert('更换成功', {
                                skin: 'layui-layer-molv'
                                , closeBtn: 0
                            });
                        }
                    }
                    , error: function () {
                        //演示失败状态，并实现重传
                        let demoText = $('#test-upload-demoText');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    }
                });

            }
        });

        /*按标题查找*/
        $("#query-title-btn").click(function () {
            let title = $("#query-title").val();
            if (null == title || "" === title) {
                layer.msg('请选择标题查询', {offset: '250px', time: 1500, anim: 6});
            } else {
                table.reload('all-news-table', {
                    url: '/emp/getAllNews'
                    , where: {title: title} //设定异步数据接口的额外参数
                });
            }
        });


        /*发布一条新闻*/
        $("#add-news-btn").click(function () {
            layer.open({
                type: 1
                , skin: 'layui-layer-rim'
                , area: ['640px', '600px']
                , content: $("#add-news-box")
                , title: '发布一条新的新闻'
                , end: function (res) {
                    $("#add-news-box").css("display", 'none');
                }
            });
            $("#add-news").click(function () {
                let title = $("#title").val();
                let author = $("#author").val();
                let text = $("#text").val();
                if (title.length < 5){
                    layer.msg('文章的标题不能少于5个字', {offset: '250px', time: 1500, anim: 6});
                    return false;
                }
                if (author === null || author === ""){
                    layer.msg('请填写发布人', {offset: '250px', time: 1500, anim: 6});
                    return false;
                }
                if (text.length<50){
                    layer.msg('内容不能少于50个字', {offset: '250px', time: 1500, anim: 6});
                    return false;
                }
                let url = "/addNews"
                let param = {title:title,author:author,text:text};
                $.post(url,param,function (data) {
                    table.reload('all-news-table', {
                        url: '/emp/getAllNews'
                    });
                    if (data === true || data === "true"){
                        layer.closeAll();
                        layer.alert('发布成功,图片默认,可自己修改', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    }else {
                        layer.alert('发布失败', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        });
                    }
                });
                return false;
            });


        });


    });

</script>


</html>


